{% extends 'base.html'%}
{% load static %}

{% block css%}
<link rel="stylesheet" href="{% static 'css/login.css' %}">
{% endblock css%}

{% block body %}
<div style="background-color: aqua;margin-top: -20px;height: 520px;padding-top: 50px;">
    <div style="display: flex;justify-content: space-between;">
        <div>
            <img src="{% static 'imgs/6.png'%}" alt="">
        </div>
        <div class="container_login">
            <h2>CRM系统登录</h2>
            <form method="post" novalidate>
                {% csrf_token %}
                <label for="username">用户名：</label>
                {{ form.username }}
                <div style="margin-top: 5px;">
                    <span style="color: red;">{{form.errors.username.0}}</span>
                </div>
                <label for="password">密码：</label>
                {{ form.password }}
                <div style="margin-top: 5px;">
                    <span style="color: red;">{{form.errors.password.0}}</span>
                </div>
                <div style="display: flex;justify-content:space-between;margin-top: 10px;margin-bottom: 15px;">
                    <input type="button" value="注册" style="border: 1px solid #ccc;color: rgb(132, 167, 231);">
                    <input type="button" value="忘记密码？" style="border: 1px solid #ccc;color: rgb(245, 8, 55);">
                </div>

                <div class="form-group3" style="width: 100%;">
                    <input id='div_login' type="submit" value="登录" />
                </div>
            </form>
        </div>
    </div>
</div>


{% endblock %}

{% block js %}
{{ block.super }}
<script>
    function login() {
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;

        // 在这里添加验证逻辑，例如发送请求到服务器验证用户名和密码

        // 假设验证通过
        if (username === "admin" && password === "password") {
            // 登录成功，跳转到其他页面或执行其他操作
            alert("登录成功！");
        } else {
            // 登录失败，显示错误信息
            document.getElementById("error-message").textContent = "用户名或密码错误！";
        }
    }
</script>
{% endblock %}